<template>
  <!--模态窗 单行-->
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >
    <div class="modal-ctrl-body" v-show="RevampModalObj.isShow">
      <div class="modal-ctrl-main odd-row-ctrl">
        <div class="modal-title">
          <p>修改地图菜单信息</p>
        </div>
        <div class="modal-ctrl-content">

          <div class="modal-row">
            <div class="modal-form-key f-l indispensable">
              菜单名称：
            </div>
            <input type="text" maxlength="16" placeholder="最长16个字符" v-model="AddDataModal.NAME" class="modal-text f-l">
          </div>

          <div class="modal-row">
            <div class="modal-form-key f-l indispensable">
              父级菜单编码：
            </div>
            <input type="text" maxlength="16" placeholder="最长16个字符"  v-model="AddDataModal.PARENT_MENU_CODE" class="modal-text f-l">
          </div>

          <div class="modal-row">
            <div class="modal-form-key f-l indispensable">
              目标菜单编码：
            </div>
            <input type="text" maxlength="16" placeholder="最长16个字符"  v-model="AddDataModal.TARGET_MENU_CODE" class="modal-text f-l">
          </div>

          <div class="modal-row">
            <div class="modal-form-key f-l ">
              数据类别：
            </div>
            <input type="text" maxlength="16" placeholder="最长16个字符"  v-model="AddDataModal.CATEGORY" class="modal-text f-l">
          </div>

          <div class="modal-row">
            <div class="modal-form-key f-l">
              所属单位：
            </div>
            <input type="text" v-model="stationName" placeholder="请选择所属单位" @click="getStationTree" readonly="readonly" class="modal-text f-l">
            <input v-model="AddDataModal.STATION_ID" type="hidden">
            <div class="sectionTree" v-show="sectionTreeIShow">
              <div id="sectionTree" class="ztree sectionTree-box"></div>
            </div>
            <input type="button" v-show="AddDataModal.STATION_ID!==''" class="clear-station-body" @click="clearSection" value="清除"/>
          </div>

        </div>
        <div class="btns text-r">
          <button type="button" class="btn btn-default" @click="closeRoleModal">取消</button>
          <button type="button" class="btn btn-info" @click="roleAddFn">确定</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
    export default {
        name: "RevampMapMenuModal",
        props:["RevampModalObj","selectRowId"],
        data(){
          return{
            AddDataModal:{
              NAME:"",//名称
              PARENT_MENU_CODE:"",//父级菜单
              TARGET_MENU_CODE:"",//目标菜单
              CATEGORY:"",//数据类别
              STATION_ID:"",//所属单位
            },
            sectionTreeIShow:false,
            stationName:"",
            setting : {
              data: {
                simpleData: {
                  enable: true
                },
              }
            },
          }
        },
        mounted(){
          let _this = this;
          this.setting.callback = {
            onClick:function(event,treeId,treeNode){ //新增警员部门树选择
              //console.log(treeNode);
              _this.AddDataModal.STATION_ID = treeNode.id;
              _this.stationName = treeNode.name;
              _this.sectionTreeIShow = !_this.sectionTreeIShow;
            }
          };
          this.$axios.get(this.HOST+'/station/getOrgaInfo')
            .then((data)=>{
              $.fn.zTree.init($("#sectionTree"), this.setting, data.data.data);
              //console.log(data);
            })
            .catch((err)=>{
              //console.log(err);
            })
        },
        watch:{
          RevampModalObj:{
            handler(v1){
              if( v1.isShow ){
                //this.radioId = this.selectRadioId;
                //获取详情
                this.getMapMenuData()
              }
            },
            deep:true
          }
        },
        methods:{
          //获取地图菜单数据
          getMapMenuData(){
            //console.log(this.radioId);
            //console.log(this.selectRowId);
            let params = {
              "columns":["*"],
              "conditions": [
                {
                  "field": "ID",
                  "symbol": "=",
                  "value": this.selectRowId
                }
              ],
              "dataTypeCode": "pointresource",
              "tableName": "T_RES_MAP_DICTIONARY_RELATION"
            };
            this.$axios.post(this.HOST+"/base/query/page",params)
              .then((data)=>{
                //console.log(data);
                let successData = data.data.data.list[0];
                for( let radioDataKey in this.AddDataModal ){
                  for( let successKey in successData ){
                    if( radioDataKey === successKey ){
                      this.AddDataModal[radioDataKey] =  successData[successKey];
                    }
                  }
                }
                this.stationName = successData.STATION_ID_PARSE;
                //console.log(this.AddDataModal);
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //修改
          roleAddFn(){

            let searchParams = {
              "columns":["*"],
              "conditions":[
                {
                  "field": "ID",
                  "symbol": "!=",
                  "value": this.selectRowId
                },
                {"field": "TARGET_MENU_CODE","symbol":"=","value":this.AddDataModal.TARGET_MENU_CODE}
              ],
              "dataTypeCode":"pointresource",
              "pageIndex":1,
              "pageSize":20,
              "tableName":"T_RES_MAP_DICTIONARY_RELATION"
            };
            this.$axios.post(this.HOST+"/base/query/page",searchParams)
              .then(res=>{
                console.log(res);
                if( res.data.data.list.length > 0 ){
                  this.s_alert("已存在该目标菜单！");
                }else{
                  if( this.verifyForm.isNull(this.AddDataModal.NAME) ){
                    this.s_alert("名称不能为空！");
                    return false;
                  }else  if( this.verifyForm.isNull(this.AddDataModal.PARENT_MENU_CODE) ){
                    this.s_alert("父级菜单编码不能为空！");
                    return false;
                  }else  if( this.verifyForm.isNull(this.AddDataModal.TARGET_MENU_CODE) ){
                    this.s_alert("目标菜单编码不能为空！");
                    return false;
                  }

                  let paramsKey = [];
                  let paramsValue = [];

                  for( let kay in this.AddDataModal ){
                    paramsKey.push(kay);
                    paramsValue.push(this.AddDataModal[kay]);
                  }

                  let params = {
                    "conditions": [
                      {
                        "field": "ID",
                        "symbol": "=",
                        "value": this.selectRowId
                      }
                    ],
                    "dataTypeCode": "pointresource",
                    "data": this.AddDataModal,
                    "tableName": "T_RES_MAP_DICTIONARY_RELATION"
                  };

                  this.$axios.put(this.HOST+"/base/modify",params)
                    .then((data)=>{
                      //console.log(data);
                      if( data.data.success === true ){
                        this.s_alert("修改成功！");
                        // alert("新增角色成功！");
                        this.s_logwrite("系统-地图菜单","修改地图菜单");
                        this.closeRoleModal();
                      }
                    })
                    .catch((err)=>{
                      this.s_alert("修改失败！");
                      // alert("新增角色失败！");
                      //console.log(err);
                    });
                }
              })
              .catch(err=>{
                console.log(err);
              })
          },
          //展开部门树
          getStationTree(){
            this.sectionTreeIShow = !this.sectionTreeIShow;
          },
          //选择等级
          selectStageCode(ele){
            this.roleParams.stageCode = ele.target.value;
          },
          //清除部门选择
          clearSection(){
            this.AddDataModal.STATION_ID = "";
            this.stationName = "";
          },
          //清除缓存
          clearData(){
            this.AddDataModal={
              NAME:"",//名称
              PARENT_MENU_CODE:"",//父级菜单
              TARGET_MENU_CODE:"",//目标菜单
              CATEGORY:"",//数据类别
              STATION_ID:"",//所属单位
            };
            this.stationName='';
          },
          //关闭弹窗
          closeRoleModal(){
            this.clearData();
            this.$emit("closeRevampModal");
          }
        }
    }
</script>

<style scoped>
  textarea.modal-text {
    min-height: 60px;
    max-height: 60px;
    max-width: 80%;
    min-width: 80%;
  }
  .fadeInDown,.fadeOutUp{
    animation-duration: .500s;
  }
  .sectionTree{
    position: absolute;
    top: 30px;
    right: 0;
    width: 80%;
    z-index: 2;
    background-color: #fff;
    border:1px solid rgba(51,51,51,0.2);
    box-sizing: border-box;
    padding: 5px;
    max-height: 200px;
    overflow-y: auto;
  }
</style>
